Extract duplicated styles into shared molecules and color atoms

Move .score, .status, .add-bar and .btn-accent molecules into app.css
and replace BEM color modifiers with bare atoms (bg-success, bg-accent,
bg-danger, bg-accent-soft, text-accent, text-white). Rename the
category-specific cat-add-bar to add-bar and the groceries page's
sticky autocomplete bar to grocery-add-bar to avoid the collision.
Cuts dcd duplicate lines from 1288 to 780.

1 files changed, 7 insertions, 59 deletions

diff --git a/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte b/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte
index ab0774c..d57ed79 100644
--- a/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte
+++ b/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte
@@ -70,16 +70,16 @@
 	});
 
 	function scoreClass(score: number): string {
-		if (score >= 80) return 'score score--good';
-		if (score >= 50) return 'score score--mid';
-		return 'score score--bad';
+		if (score >= 80) return 'score bg-success';
+		if (score >= 50) return 'score bg-accent';
+		return 'score bg-danger';
 	}
 
 	function statusClass(status: RoutineState['status']): string {
-		if (status === 'ok') return 'status status--ok';
-		if (status === 'due') return 'status status--due';
-		if (status === 'late') return 'status status--late';
-		return 'status status--very-late';
+		if (status === 'ok') return 'status bg-success text-white';
+		if (status === 'due') return 'status bg-accent-soft text-accent';
+		if (status === 'late') return 'status bg-accent text-white';
+		return 'status bg-danger text-white';
 	}
 </script>
 
@@ -346,58 +346,6 @@
 		color: var(--text-secondary);
 	}
 
-	.status {
-		flex-shrink: 0;
-		padding: 0.25rem 0.5rem;
-		border-radius: 9999px;
-		font-size: 0.75rem;
-		font-weight: 600;
-		white-space: nowrap;
-	}
-
-	.status--ok {
-		background: var(--success);
-		color: var(--white);
-	}
-
-	.status--due {
-		background: var(--shadow-accent);
-		color: var(--accent);
-	}
-
-	.status--late {
-		background: var(--accent);
-		color: var(--white);
-	}
-
-	.status--very-late {
-		background: var(--danger);
-		color: var(--white);
-	}
-
-	.score {
-		flex-shrink: 0;
-		min-width: 2.75rem;
-		padding: 0.25rem 0.5rem;
-		border-radius: 9999px;
-		text-align: center;
-		font-size: 0.875rem;
-		font-weight: 700;
-		color: var(--white);
-	}
-
-	.score--good {
-		background: var(--success);
-	}
-
-	.score--mid {
-		background: var(--accent);
-	}
-
-	.score--bad {
-		background: var(--danger);
-	}
-
 	.add-completion {
 		flex-direction: row;
 		align-items: center;